<template>
  <div class="form">
    <div class="form-input">
      <div class="ch-one ffir02">
        <span class="ch-one-span">*</span>
        <p class="spLeft">真实姓名:</p>
        <input class="ch-one-input" v-model="userName" type="text" placeholder="请填写您的真实姓名">
      </div>
      <div class="ch-one ffir02">
        <span class="ch-one-span">*</span>
        <p class="spLeft">联系电话:</p>
        <input  class="ch-one-input" v-model="phone" type="text" placeholder="请填写您的联系电话">
      </div>
      <div class="ch-one ffir02">
        <span class="ch-one-span">*</span>
        <p class="spLeft">公司名称:</p>
        <input  class="ch-one-input" v-model="companyName" type="text" placeholder="请填写您的公司名称">
      </div>
      <div class="ch-two">
        <span class="ch-one-span">*</span>
        <p class="spTop">身份证正面/身份证背面</p>
        <div class="spBottom">
          <div class="upimg">
            <uploader @getFiles="getImageList($event,'idCardRightSide')" :numLength="1"></uploader>
          </div>
          <div class="upimg">
            <uploader @getFiles="getImageList($event,'idCardLeftSide')" :numLength="1"></uploader>
          </div>
        </div>
      </div>
      <div class="ch-two">
        <span class="ch-one-span">*</span>
        <p class="spTop">上传营业执照/开户许可证</p>
        <div class="spBottom">
          <div class="upimg">
            <uploader @getFiles="getImageList($event,'license')" :numLength="1"></uploader>
          </div>
          <div class="upimg">
            <uploader @getFiles="getImageList($event,'openingPermit')" :numLength="1"></uploader>
          </div>
        </div>
      </div>
    </div>
    <section class="section-btn">
      <div class="register_info" style="display: block;">
        <div class="btn btn_apply" @click="handleFormClick">提交申请</div>
        <div class="btn btn_ing" style="display:none;">申请中...</div>
      </div>
      <ul class="desc">
        <li class="desc-li">
          <span class="title">合作商说明：</span>
          <label>
            <title></title>
          </label>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
import axios from 'axios'
import uploader from '../../../public/Upload'

export default {
  name: 'SignForm',
  data () {
    return {
      userName: '',
      phone: '',
      companyName: '',
      idCardRightSide: '', // 身份证正面
      idCardLeftSide: '', // 身份证背面
      license: '', // 营业执照
      openingPermit: '' // 开户许可证
    }
  },
  components: {
    uploader
  },
  methods: {
    getImageList (files, typeimg) {
      this.$nextTick(() => {
        for (let i = 0, len = files.length; i < len; i++) {
          // console.log(files)
          if (typeimg === 'idCardRightSide') {
            this.idCardRightSide = files[i].src
          }
          if (typeimg === 'idCardLeftSide') {
            this.idCardLeftSide = files[i].src
          }
          if (typeimg === 'license') {
            this.license = files[i].src
          }
          if (typeimg === 'openingPermit') {
            this.openingPermit = files[i].src
          }
          // this.imgList.push(files[i].src)
          // this.imgList.push(files[i].src.split('base64,')[1])
          // 上传图片
          //   this._getFileCode({
          //     Base64Str: files[i].src.split("base64,")[1],
          //     AttachmentType: this.$enums.AttachmentType.Activity
          //   });
        }
      })
    },
    handleFormClick () {
      if (this.userName.length < 1) {
        Toast('姓名不能为空')
        return false
      }
      if (!(/^1[3|4|5|6|7|8|9]\d{9}$/.test(this.phone))) {
        Toast('电话号码有误')
        return false
      }
      if (this.companyName.length < 1) {
        Toast('公司名称不能为空')
        return false
      }
      var params = new URLSearchParams()
      params.append('name', this.userName)
      params.append('phone', this.phone)
      params.append('idCardRightSide', this.idCardRightSide)
      params.append('idCardLeftSide', this.idCardLeftSide)
      params.append('license', this.license)
      params.append('openingPermit', this.openingPermit)
      axios.post('/meimai/interface/store/save', params).then((res) => {
        // console.log(res)
        let datas = res.data
        if (datas.code === 0) {
          Toast('申请成功，正在审核')
          this.$router.push('/')
        } else {
          Toast(datas.msg)
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.form >>> .thumbnails .thumbnail
  width: 100%
.form
  margin-top: .4rem
  display: block
  .form-input
    background: #FFFFFF
    .ffir02
      border-bottom: .02rem solid #ECECEC
    .ch-two
      position: relative
      width: 94%
      margin: 0 auto
      background: #FFFFFF
      .ch-one-span
        display: inline-block
        color: red
        vertical-align: middle
      .spTop
        display: inline-block
        padding: .3rem 0 .3rem 0
        font-size: .28rem
        color: #6d6d6d
      .spBottom
        width: 100%
        display: flex
        justify-content: space-around
        padding-bottom: .3rem
        .upimg
          width: 50%
          height: 150px
          display: flex
          align-items: center
          justify-content: center
          overflow: hidden
          position: relative
    .ch-one
      position: relative
      width: 94%
      margin: 0 auto
      background: #FFFFFF
      .ch-one-span
        display: inline-block
        color: red
        vertical-align: middle
      .spLeft
        display: inline-block
        padding: .3rem 0 .3rem 0
        font-size: .28rem
        color: #6d6d6d
      .ch-one-input
        width: 75%
        height: .5rem
        line-height: .5rem
        position: absolute
        top: .2rem
        right: 0
        text-align: right
  .section-btn
    padding: .24rem .24rem 0 .24rem;
    .register_info
      width: 100%
      background: #fff
      border-radius: .1rem .1rem 0 0
      display: block
    .btn_apply
      background: #ec2935
    .btn
      text-align: center
      line-height: .76rem
      display: block
      color: #fff
      font-size: .28rem
    .desc
      display: block
      background: #fff
      border-radius: 0 0 .1rem .1rem
      margin-top: .3rem
      padding: 0 .2rem
      overflow: hidden
      list-style: none
      .desc-li
        float: left
        width: 100%
        padding: .22rem 0
        position: relative
        min-height: 1.6rem
</style>
